<div class="blockOverlay2" onclick="javascript:$('.blockMail').css({'display':'none'});$('.blockOverlay2').css({'display':'none'});"></div>
<div class="blockMail">
    <div class="login-register form-area-mail " style="">
        <div id="register-form">
            <form id="signin-form-reg" action="" method="post">
                <h2 id="sign-registration">Email<span onclick="javascript:$('.blockMail').css({'display':'none'});$('.blockOverlay2').css({'display':'none'});"></span></h2>
                <label id="email-label">email address<input name="email" id="email" style="<?=isset($form2->elements['email']->errors[0])?'border: 1px solid red;':''?>" value="<?=isset($form2->elements['email']->value)?$form2->elements['email']->value:''?>" type="text"/></label><br />
                <label id="name-label">description<input name="description" id="description" style="<?=isset($form2->elements['name']->errors[0])?'border: 1px solid red;':''?>" value="<?=isset($form2->elements['name']->value)?$form2->elements['name']->value:''?>" type="text"/></label><br />
                <input id="signin-submit-button-register" class="reg" name="register[submit]" type="submit" value="Submit"/>
            </form>
            <script type="text/javascript">
                $('#signin-submit-button-register').click(function(e){
                    e.preventDefault();
                    var email = $('#signin-form-reg input[name=email]').val();
                    var message = $('#signin-form-reg input[name=description]').val();
                    var link = window.location.href;


                    $.ajax({
                        type    : 'POST',
                        url     : '/shop/send/',
                        dataType: 'json',
                        data    : {email:email,link:link,message:message},
                        success : function(msg) {
//                            $('.contact_form input[name=email]').val('');
//                            $('.contact_form textarea').val('');
                            $('.blockMail').css({'display':'none'});
                            $('.blockOverlay2').css({'display':'none'});
                            alert('e-Mail sent');
//                            window.location.href='/';
                        },
                        error   : function(msg){
                            alert('Information is not valid.Please try again');
                        }
                    });
                })
            </script>
        </div>
    </div>
</div>
<div id="content">
    <div class="item_header">
        
        <div class="item_header_left">
            <span class="item_cat"><a href="/shop/category/<?=isset($category)?$category:''?>/"><?=isset($category)?$category:''?></a></span> <?=isset($subcategory)?'/ <span class="item_sub_cat"><a href="/shop/category/'.$category.'/'.$subcategory.'/">'.$subcategory.'</a></span>':''?> / <span><?=$item['name']?></span>
        </div>
        
        <div class="item_header_right">
            <span class="item_sale_clock"></span><span class="item_sale_text">Sale ends</span> <span class="item_sale_time">4 days 19 hours</span>
        </div>
        
        <div style="clear: both"></div>
    </div>
    
    <div class="item_h1">
        <h1><?=$item['name']?></h1>
    </div>
    
    <div class="item_left_block">
        <div class="item_big_img">
<!--            <img src="/images_tmp/item_big.png"/>-->
            <div class="item_zoom_image_wrapper">
<!--                <a href='/images_tmp/fruit_big.png' class = 'cloud-zoom' id='zoom1' rel="adjustX: 10, adjustY:-4">-->
<!--                    <img src="/images_tmp/fruit_small.png" alt='' title="Збільшений варіант" />-->
<!--                </a>-->
                <? if((!isset($mainImage))&&(is_array($images)))$mainImage=current($images)?>
                <a href='<?=isset($mainImage['alias'])?'/content/directory/images/shop/shopItemViewZoomBig/'.substr($mainImage['alias'],0, 1).'/'.$mainImage['alias'].'.jpg':'' ?>' class = 'cloud-zoom' id='zoom1' rel="adjustX: -70, adjustY:-8">
                    <img src="<?=isset($mainImage['alias'])?'/content/directory/images/shop/shopItemViewZoomSmall/'.substr($mainImage['alias'],0, 1).'/'.$mainImage['alias'].'.jpg':''?>" alt='' title="<?=$item['name']?>" />
                </a>
            </div>

            <span class="item_image_zoom"></span>
            <span>Hover over image to zoom</span>
        </div>

        <div class="item_mini_img">
            <div class="item_mini_img_wrapper">

                <?php
                if ((isset($images))&&(is_array($images))){
                    foreach($images as $image){
                        echo'<a href="/content/directory/images/shop/shopItemViewZoomBig/'.substr($image['alias'],0, 1).'/'.$image['alias'].'.jpg" class="cloud-zoom-gallery" title="Thumbnail 1" rel="useZoom: \'zoom1\', smallImage: \'/content/directory/images/shop/shopItemViewZoomSmall/'.substr($image['alias'],0, 1).'/'.$image['alias'].'.jpg\' ">
                                <img src=" /content/directory/images/shop/shopItemViewZoomTiny/'.substr($image['alias'],0, 1).'/'.$image['alias'].'.jpg" alt = "Thumbnail 1" title="Click to view full size"/>
                             </a>';
                    }
                }
                ?>
<!--            <a href='/images_tmp/fruit_big.png' class='cloud-zoom-gallery' title='Thumbnail 1'rel="useZoom: 'zoom1', smallImage: '/images_tmp/fruit_small.png' ">-->
<!--                <img src="/images_tmp/fruit_tiny.png" alt = "Thumbnail 1" title="фрукт1"/>-->
<!--            </a>-->
<!--            <a href='/images_tmp/fruit2_big.png' class='cloud-zoom-gallery' title='Thumbnail 1'rel="useZoom: 'zoom1', smallImage: '/images_tmp/fruit2_small.png' ">-->
<!--                <img src="/images_tmp/fruit2_tiny.png" alt = "Thumbnail 1" title="фрукт2"/>-->
<!--            </a>-->
<!--            <a href='/images_tmp/fruit3_big.png' class='cloud-zoom-gallery' title='Thumbnail 1'rel="useZoom: 'zoom1', smallImage: '/images_tmp/fruit3_small.png' ">-->
<!--                <img src="/images_tmp/fruit3_tiny.png" alt = "Thumbnail 1" title="фрукт3"/>-->
<!--            </a>-->

            </div>
            <div style="clear: both"></div>
        </div>
    </div>

    <div class="item_right_block">
<!--        <div id="zoom"></div>-->
        
        <div class="item_info">
            <span class="item_info_cat">Fluxus</span>
            <span class="item_info_name"><?=$item['name']?></span>
            <span class="item_info_price"><?=mb_substr($item['price'],0,-3,'UTF-8')?> грн</span>
        </div>
        
        <div class="item_settings">
            <div>
                <div>
                    <span class="size_name_header">Sizes</span><span id="size_name"></span> 
                </div>
                
                <div class="clear"></div>
            </div>
            
            <div class="item_sizes">
                <?php
                $model = new Model_Manager();
                if(!empty($_SESSION['identity'])){
                    $favSize = $model->getFavSize($_SESSION['identity']['id']);
                }
                else{
                    $favSize ='';
                }

                foreach ($sizeList as $size){
                    $activeClass = ($size['name']==$favSize) ? 'active_size' : '';
                    echo'<img class="'.$activeClass.'" src="/content/directory/images/sizes/sizes/'.substr($size['alias'],0, 1).'/'.$size['alias'].'.jpg" title="'.$size['name'].'"/>'."\n";
                }
                ?>
            </div>
            
            <span class="item_size_chart">Size Chart</span>
            <div class="size_chart_img">
                <span><a href="#"></a></span>
<!--                <img src='/images_tmp/sizes_chart.png'/>-->
                <table>
                    <thead>
                        <tr>
                            <th>US</th>
                            <th>IT</th>
                            <th>UK</th>
                            <th>FR</th>
                            <th>JP</th>
                            <th>Bust</th>
                            <th>Waist</th>
                            <th>Hip</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>00</td>
                            <td>34</td>
                            <td>2</td>
                            <td>32</td>
                            <td>3</td>
                            <td>31"</td>
                            <td>23"</td>
                            <td>33 1/2"</td>
                        </tr>
                        <tr>
                            <td>0</td>
                            <td>36</td>
                            <td>4</td>
                            <td>34</td>
                            <td>5</td>
                            <td>32 1/2"</td>
                            <td>24"</td>
                            <td>35"</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>38</td>
                            <td>6</td>
                            <td>36</td>
                            <td>7</td>
                            <td>33"</td>
                            <td>25"</td>
                            <td>36"</td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>40</td>
                            <td>8</td>
                            <td>38</td>
                            <td>9</td>
                            <td>34"</td>
                            <td>26"</td>
                            <td>37</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div style="clear: both"></div>
            
            <div>
                <span class="color_name_header">Color</span><span id="color_name"></span> 
            </div>
            
            <div class="item_colors">
        <?php foreach($colorList as $color){
                echo'<img src="/content/directory/images/colors/colors/'.substr($color['alias'],0, 1).'/'.$color['alias'].'.jpg" title="'.$color['name'].'"/>';
            }
        ?>
            </div>
            
            <div class="item_add"><a id="<?=$item['id']?>">Add to cart</a></div>
            
        </div>
        
        <div class="item_share">
            <h4>Share:</h4>
            <span><a onclick="javascript:$('.blockMail').css({'display':'block'});$('.blockOverlay2').css({'display':'block'});" class="share_email" href="javascript:void(0);"></a></span>
<!--            <span><a class="share_twitter" href="#"></a></span>-->
            <span><a href="https://twitter.com/share" class="twitter-share-button">Tweet</a></span>

            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
            <div id="fb-root"></div>
            <script>(function(d, s, id) {
                var js, fjs = d.getElementsByTagName(s)[0];
                if (d.getElementById(id)) return;
                js = d.createElement(s); js.id = id;
                js.src = "//connect.facebook.net/ru_RU/all.js#xfbml=1";
                fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));</script>

            <fb:like send="true" layout="button_count" width="200" show_faces="true" font="tahoma"></fb:like>

<!--            <iframe src="http://www.facebook.com/plugins/like.php?href=--><?php //the_permalink() ?><!--&layout=standard&show_faces=false&width=450&action=like&colorscheme=light&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>-->
<!--            <span><a class="share_facebook" href="#"></a></span>-->
            <div style="clear: both"></div>
        </div>
        
        <div class="item_tabs">
            <!-- the tabs -->
            <ul class="tabs">
                    <li><a href="#">Description</a></li>
<!--                    <li><a href="#">Tab 2</a></li>
                    <li><a href="#">Tab 3</a></li>-->
            </ul>
            <div style="clear: both"></div>
            <!-- tab "panes" -->
            <div class="panes">
                    <div><?=$item['text1']?></div>
                    <div>Second tab content</div>
                    <div>Third tab content</div>
            </div>
        </div>
    </div>
    <div style="clear: both"></div>
</div>
<div class="item_sudjest">
    <div class="item_sudjest_wrapper">
        <div class="item_sudjest_header">
            <span>May We Suggest</span>
        </div>
        <div class="suggest_items_wrapper">
            <?php foreach ($suggestion as $suggest) :?>
                <div class="suggest_item">
                    <a href="/shop/item/<?=$suggest['alias']?>/<?=isset($category)?$category:''?>/<?=isset($subcategory)?$subcategory:''?>/"><img src="<?=$suggest['img']?>"/></a>
                    <span><?=$suggest['name']?></span>
                    <span class="suggest_item_price"><?=mb_substr($suggest['price'],0,-3,'UTF-8')?> грн</span>
                </div>
            <?php endforeach; ?>
            <span class="clear"></span>
        </div>
    </div>
</div>
<script>
    

</script>

<script type="text/javascript">
    /*script zoom image*/            
    $.fn.CloudZoom.defaults = {
           zoomWidth: '463',
           zoomHeight: '376',
//           adjustX: 0,
//           adjustY:0,
           position: 'right',
           tint: '#cccccc',
           tintOpacity: 0.5,
           lensOpacity: 0.5,
           softFocus: false,
           smoothMove: 1,
           showTitle: true,
           titleOpacity: 0.5
           
       };
     /*script zoom image end*/  
     
     /*script tabs*/ 
    $(function() {
        
        $("ul.tabs").tabs("div.panes > div");
    });
    /*script tabs end*/ 
    
    /*script size chart*/
    $('.item_size_chart').live('click',function(){
        $('.size_chart_img').css('display','block');
    })
    $('.size_chart_img span a').live('click',function(e){
        e.preventDefault();
        $('.size_chart_img').css('display','none');
    })
    /*script size chart end*/
    
    
    /*Select color and size scripts*/
    
    $('.item_sizes img').live('click', function(e) {
        e.preventDefault();
        $('.item_sizes img').removeClass('active_size');
        $(this).addClass('active_size');
        $('#size_name').text($(this).attr('title'));
   	});
        
    $('.item_colors img').live('click', function(e) {
        e.preventDefault();
        $('.item_colors img').removeClass('active_color');
        $(this).addClass('active_color');
        $('#color_name').text($(this).attr('title'));
   	});
    /*Select color and size scripts end*/

</script>
